<%--
  Created by IntelliJ IDEA.
  User: root
  Date: 11/13/24
  Time: 6:20 PM
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<rapid:override name="title">
    <title>${article.articleTitle}</title>
</rapid:override>

<rapid:override name="header-style">
    <rapid:override name="header-style">
        <link rel="stylesheet" href="/css/highlight.css">
        <style>
            .entry-title{
                background: #f8f8f8;
            }
        </style>
    </rapid:override>
</rapid:override>

<rapid:override name="breadcrumb">
    <nav class="breadcrumb">
        <a class="crumbs" href="/">
            <i class="fa fa-home"></i>First Page
        </a>
        <c:choose>
            <c:when test="${article.categoryList!=null && article.categoryList.size()>0}">
                <c:forEach items="${article.categoryList}" var="c">
                    <i class="fa fa-angle-right"></i>
                    <a href="/category/${c.categoryId}">
                        ${c.categoryName}
                    </a>
                </c:forEach>
            </c:when>
            <c:otherwise>
                <i class="fa fa-angle-right"></i>
                <a>No category</a>
            </c:otherwise>
        </c:choose>
        <i class="fa fa-angle-right"></i>
        Content
    </nav>
</rapid:override>

<rapid:override name="left">
    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">
            <article class="post" id="articleDetail" data-id="${article.articleId}">
                <header class="entry-header">
                    <h1 class="entry-title">
                        ${article.articleTitle}
                    </h1>
                </header><!--.entry-header-->
                <div class="entry-content">
                    <div class="single-content">
                        ${article.articleContent}
                    </div>
                    <div class="s-weixin">
                        <ul class="weimg1">
                            <li><strong>WeChat</strong></li>
                            <li>Find me</li>
                            <li><img src="/img/weixin.jpg"> </li>
                        </ul>
                        <ul class="weimg2">
                            <li><strong>boke</strong></li>
                            <li>Hai Na Bai Chuan</li>
                            <li><img src="/img/qqGroup.jpg"></li>
                        </ul>
                        <div class="clear"></div>
                    </div>
                    <div class="clear"></div>
                    <div id="social">
                        <div class="social-main">
                            <span class="like">
                                <a href="javascript:;" data-action="ding" data-id="1" title="Good" class="favorite" onclick="increaseLikeCount()">
                                    <i class="fa fa-thumbs-up"></i>Good
                                    <i class="count" id="count-${article.articleId}">${article.articleLikeCount}</i>
                                </a>
                            </span>
                            <div class="shang-p">
                                <div class="shang-empty"><span></span></div>
                                <span class="shang-s">
                                    <a onclick="PaymentUtils.show();" style="cursor:pointer">Pay</a>
                                </span>
                            </div>
                            <div class="share-sd">
                                <span class="share-s" style="margin-top: 25px!important;">
                                    <a href="javascript:void(0)" id="share-s" title="share">
                                        <i class="fa fa-share-alt"></i>Share
                                    </a>
                                </span>
                                <div id="share">
                                    <ul class="bdsharebuttonbox bdshare-button-style1-16" data-bd-bind="1503997585792">
                                        <li><a title="more" class="bds_more fa fa-plus-square" data-cmd="more" onclick="return false;" href="#"></a> </li>
                                        <li><a title="Share to QQ Zone" class="fa fa-qq" data-cmd="qzone" onclick="return false;" href="#"></a> </li>
                                        <li><a title="Share to XinLang" class="fa fa-weibo" data-cmd="tsina" onclick="return false;" href="#"></a> </li>
                                        <li><a title="Share to Tencent" class="fa fa-pinterest-square" data-cmd="tqq" onclick="return false;" href="#"></a> </li>
                                        <li><a title="Share to RENREN" class="fa fa-renren" data-cmd="renren" onclick="return false;" href="#"></a> </li>
                                        <li><a title="Share to WeChat" class="fa fa-weixin" data-cmd="weixin" onclick="return false;" href="#"></a> </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="clear"></div>
                        </div>
                    </div>

                    <footer class="single-footer">
                        <ul class="single-meta">
                            <c:if test="${sessionScope.user!=null && (sessionScope.user.userId == article.articleUserId || sessionScope.user.userRole == 'admin')}">
                                <li class="edit-link">
                                    <a target="_blank" class="post-edit-link" href="/admin/article/edit/${article.articleId}">Edit</a>
                                </li>
                            </c:if>
                            <li class="comment">
                                <a href="/article/${article.articleId}#comments" rel="external nofollow">
                                    <i class="fa fa-comment-o"></i>
                                    <i class="comment-count">${commentList.size()}</i>
                                </a>
                            </li>
                            <li class="views">
                                <i class="fa fa-eye"></i>
                                <span class="articleViewCount">${article.articleViewCount}</span>
                                views
                            </li>
                            <li class="r-hide">
                                <a href="javascript:pr()" title="sidebar">
                                    <i class="fa fa-caret-left"></i>
                                    <i class="fa fa-caret-right"></i>
                                </a>
                            </li>
                        </ul>
                        <ul id="fontsize">
                            <li>A+</li>
                        </ul>
                        <div class="single-cat-tag">
                            <div class="single-cat">Category:
                                <c:forEach items="${article.categoryList}" var="c">
                                    <a href="/category/${c.categoryId}">
                                        ${c.categoryName}
                                    </a>
                                </c:forEach>
                            </div>
                        </div>
                    </footer> <!--.entry-footer-->

                    <div class="clear"></div>
                </div> <!--.entry-content-->
            </article> <!--#post-->

            <!--Tags Start-->
            <div class="single-tag">
                <ul class="" data-wow-delay="0.3s">
                    <c:forEach items="${article.tagList}" var="t">
                        <li>
                            <a href="/tag/${t.tagId}" rel="tag" style="background: #666666">
                                ${t.tagName}
                            </a>
                        </li>
                    </c:forEach>
                </ul>
            </div>

            <!--Copyright Notice-->
            <div class="authorbio wow fadeInUp">
                <img alt="${article.user.userNickname}" src="${article.user.userAvatar}" class="avatar avatar-64 photo" height="64" width="64">
                <ul class="postinfo">
                    <li></li>
                    <li><strong>Copyright announce:</strong>Website Article<fmt:formatDate value="${article.articleCreateTime}" pattern="yyyy-MM-dd"/>,be <strong>
                        ${article.user.userNickname}
                    </strong>
                        created.
                    </li>
                    <li class="reprinted"><strong>Forward please marked:</strong>
                    <a href="/article/${article.articleId}" rel="bookmark" title="Text Fixed Link /article/${article.articleId}">
                        ${article.articleTitle} | ${options.optionSiteTitle}
                    </a>
                    </li>
                </ul>
                <div class="clear"></div>
            </div>

            <!--Related to Article-->
            <div id="single-widget">
                <div class="wow fadeInUp" data-wow-delay="0.3s">
                    <aside id="related_post-2" class="widget">
                        <h3 class="widget-title">
                            <span class="s-icon"></span>Related to Article
                        </h3>
                        <div id="related_post_widget">
                            <ul>
                                <c:forEach items="${similarArticleList}" var="s">
                                    <li>
                                        <a href="/article/${s.articleId}">${s.articleTitle}</a>
                                    </li>
                                </c:forEach>
                            </ul>
                        </div>
                        <div class="clear"></div>
                    </aside>
                    <!--Guess your Like -->
                    <aside id="hot_post-8" class="widget hot_post">
                        <h3 class="widget-title"><span class="s-icon"></span>Guess Your Like</h3>
                        <div id="hot_post_widget">
                            <ul>
                                <c:forEach items="${mostViewArticleList}" var="m">
                                    <li>
                                        <a href="/article/${m.articleId}">
                                            ${m.articleTitle}
                                        </a>
                                    </li>
                                </c:forEach>
                            </ul>
                        </div>
                        <div class="clear"></div>
                    </aside>
                    <!-- Guess Your Like End -->
                </div>
                <div class="clear"></div>
            </div>
            <!-- Relate to Article End -->

            <!--Previous & Next -->
            <nav class="nav-single">
                <c:choose>
                    <c:when test="${preArticle!=null}">
                        <a href="/article/${preArticle.articleId}" rel="next">
                            <span class="meta-nav">
                                <span class="post-nav">Previous
                                    <i class="fa fa-angle-left"></i>
                                </span>
                                <br>${preArticle.articleTitle}
                            </span>
                        </a>
                    </c:when>
                    <c:otherwise>
                        <span class="meta-nav">
                            <span class="post-nav">
                                None<br>
                            </span>This is First Article
                        </span>
                    </c:otherwise>
                </c:choose>
                <c:choose>
                    <c:when test="${afterArticle!=null}">
                        <a href="/article/${afterArticle.articleId}" rel="next">
                            <span class="meta-nav">
                                <span class="post-nav">Next
                                    <i class="fa fa-angle-right"></i>
                                </span>
                                <br>${afterArticle.articleTitle}
                            </span>
                        </a>
                    </c:when>
                    <c:otherwise>
                        <span class="meta-nav">
                            <span class="post-nav">
                                None<br>
                            </span>Final Article
                        </span>
                    </c:otherwise>
                </c:choose>

                <div class="clear"></div>
            </nav>

            <!--Comment Area-->
            <div class="scroll-comments"></div>
            <div id="comments" class="comments-area">
                <div id="respond" class="comment-respond">
                    <h3 id="reply-title" class="comment-reply-title"><span id="reply-title-word">Submit Comment</span>
                        <a rel="nofollow" id="cancel-comment-reply-link" href="/article/${article.articleId}#respond" style="">Cancel Respond</a>
                        <c:if test="${sessionScope.user == null}">
                            <span style="color: red">Not Login,<a href="/login" target="_blank">Go to Login</a> </span>
                        </c:if>
                    </h3>

                    <form id="comment_form" method="post">
                        <c:if test="${sessionScope.user != null}">
                            <div class="user_avatar">
                                <img src="${sessionScope.user.userAvatar}" class="avatar avatar-64 photo" height="64" width="64">
                                Current User:${sessionScope.user.userNickname}
                                <br><a href="javascript:void(0)" onclick="logout()">Logout</a>
                            </div>
                        </c:if>
                        <p class="comment-form-comment">
                            <textarea id="comment" name="commentContent" rows="4" tabindex="1" required></textarea>
                        </p>
                        <div id="comment-author-info">
                            <input type="hidden" name="commentPid" value="0">
                            <input type="hidden" name="commentPname" value="">
                        </div>
                        <div class="clear"></div>
                        <p class="form-submit">
                            <input id="submit" name="submit" type="submit" tabindex="5" value="Submit Comment">
                            <input type="hidden" name="commentArticleId" value="${article.articleId}" id="article_id">
                            <input type="hidden" name="commentPid" id="comment_pid" value="0">
                        </p>
                    </form>
                </div>

                <ol class="comment-list">
                    <c:set var="floor" value="0"/>
                    <c:forEach items="${commentList}" var="c">
                        <c:if test="${c.commentPid == 0}">
                            <c:set var="floor" value="${floor+1}"/>
                            <li class="comments-anchor">
                                <ul id="anchor-comment-${c.commentId}"></ul>
                            </li>
                            <li class="comment">
                                <div id="div-comment-${c.commentId}" class="comment-body">
                                    <div class="comment-author vcard">
                                        <img class="avatar" src="${c.commentAuthorAvatar}" alt="avatar" style="display: block;">
                                        <strong>${c.commentAuthorName}</strong>
                                        <c:if test="${c.commentRole == 1}">
                                            <i class="fa fa-black-tie" style="color: #c40000;"></i>
                                            <span class="" style="margin-top: 2px!important;color: #c40000;font-size: 13px;"><b>Blog Owner</b></span>
                                        </c:if>
                                        <span class="comment-meta commentmetadata">
                                            <span class="ua-info" style="display: inline;">
                                                <br>
                                                <span class="comment-aux">
                                                    <span class="reply">
                                                        <a rel="nofollow" class="comment-reply-link" href="#respond" onclick="replyComment()">Response</a>
                                                    </span>
                                                    <fmt:formatDate value="${c.commentCreateTime}" pattern="yyyyYearMMMonthddDay HH:mm:ss"/>&nbsp;
                                                    <c:if test="${sessionScope.user!=null && sessionScope.user.userId == article.articleUserId}">
                                                        <a href="javascript:void(0)" onclick="deleteComment(${c.commentId})">Delete</a>
                                                        <a class="comment-edit-link" href="/admin/comment/edit/${c.commentId}" target="_blank">Edit</a>
                                                    </c:if>
                                                    <span class="floor">&nbsp;${floor}building</span>
                                                </span>
                                            </span>
                                        </span>
                                        <p>
                                            <c:if test="${c.commentPid!=0}">
                                                <span class="at">@${c.commentPname}</span>
                                            </c:if>
                                            ${c.commentContent}
                                        </p>
                                    </div>
                                </div>
                                <ul class="children">
                                    <c:set var="floor2" value="0"/>
                                    <c:forEach items="${commentList}" var="c2">
                                        <c:if test="${c.commentId == c2.commentPid}">
                                            <c:set var="floor2" value="${floor2+1}"/>
                                            <li class="comments-anchor">
                                                <ul id="anchor-comment-${c2.commentId}"></ul>
                                            </li>
                                            <li class="comment">
                                                <div id="div-comment-${c.commentId}" class="comment-body">
                                                    <div class="comment-author vcard">
                                                        <img class="avatar" src="${c2.commentAuthorAvatar}" alt="avatar" style="display: block;">
                                                        <strong>${c2.commentAuthorName}</strong>
                                                        <c:if test="${c2.commentRole==1}">
                                                            <i class="fa fa-black-tie" style="color: #c40000;"></i>
                                                            <span class="" style="margin-top: 2px!important;color: #c40000;font-size: 13px;"><b>Blog Owner</b></span>
                                                        </c:if>
                                                        <span class="comment-meta">
                                                            <span class="ua-info" style="display: inline;">
                                                                <br>
                                                                <span class="comment-aux">
                                                                    <span class="reply">
                                                                        <a rel="nofollow" class="comment-reply-link" href="#respond" onclick="replyComment()">Response</a>
                                                                    </span>
                                                                    <fmt:formatDate value="${c2.commentCreateTime}" pattern="yyyyYearMMMonthddDay HH:mm:ss"/>&nbsp;
                                                                    <c:if test="${sessionScope.user!=null}">
                                                                        <a href="javascript:void(0)" onclick="deleteComment(${c2.commentId})">Delete</a>
                                                                        <a class="comment-edit-link" href="/admin/comment/edit/${c2.commentId}" target="_blank">Edit</a>
                                                                    </c:if>
                                                                    <span class="floor">&nbsp;${floor2}floor</span>
                                                                </span>
                                                            </span>
                                                        </span>
                                                        <p>
                                                            <c:if test="${c2.commentPid!=0}">
                                                                <c:if test="${c2.commentPid!=0}">
                                                                    <span class="at">@${c2.commentPname}</span>
                                                                </c:if>
                                                                ${c2.commentContent}
                                                            </c:if>
                                                        </p>
                                                    </div>
                                                </div>
                                            </li>
                                        </c:if>
                                    </c:forEach>
                                </ul>
                            </li>
                        </c:if>
                    </c:forEach>
                </ol>
            </div>
            <!-- Comment Window End-->
        </main>
        <!--.site-main-->
    </div>
    <!--Blog Main Left Article End -->
</rapid:override>

<!--SiteBar Start-->
<rapid:override name="right">
    <%@include file="../Public/part/sidebar-1.jsp"%>
</rapid:override>

<rapid:override name="footer-script">
    <script src="/js/jquery.cookie.js"></script>
    <script type="text/javascript">
    
    var articleId = $("#articleDetail").attr("data-id");
    increaseViewCount(articleId);
    layui.code({
        elem: 'pre',
        about: false
    })
    </script>
    
</rapid:override>

<%@include file="../Public/framework.jsp"%>








<%--<html>--%>
<%--<head>--%>
<%--    <title>Title</title>--%>
<%--</head>--%>
<%--<body>--%>

<%--</body>--%>
<%--</html>--%>
